<template>
    <div class="body">
        <div class="el-icon-s-fold ico-1"></div>
        <div class="right">
            <img :src="headportrait" class="head" alt="">
            <div class="name">{{username}}</div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                headportrait: JSON.parse(localStorage.getItem("userinfo")).headportrait,
                username: JSON.parse(localStorage.getItem("userinfo")).username
            }
        }
    }
</script>

<style lang="scss" scoped>
    .body {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .el-icon-s-fold {
        width: 40px;
        height: 30px;
    }

    .head {
        width: 24px;
        height: 24px;
     
        border-radius: 50%;
        margin-right: 20px;

        img {
            width: 24px;
            height: 24px;
            // border: 1px solid red;  
            border-radius: 50%;
        }
    }

    .right {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>